<template>
  <div id="back">

    <div id="login">


      <el-form ref="form" :model="form" id="innerLogin">
        <h3>登录系统</h3>
        <hr>
        <el-form-item >
          <el-input class="loginInput" v-model="form.username" placeholder="您的用户名" > </el-input>
        </el-form-item>
        <el-form-item>
          <el-input class="loginInput" type="password" v-model="form.password" placeholder="请输入您的密码" ></el-input>
        </el-form-item>
        <a href="#" id="forgetPassword"> 忘记密码</a>
        <el-form-item>
          <el-button id="loginButton" type="warning" @click="clickHandler">登录</el-button>
        </el-form-item>
      </el-form>
      <p id="msg">还没有账号？<a href="#"> 立即注册</a></p>
    </div>
  </div>


</template>
<script>
    export default {
        name: "index",
      data:function () {
        return{
          form:{
            username:'',
            password:''
          }
        }
      },
      methods:{
        clickHandler:function () {
          let _this=this;
          this.axios({
            url:'http://localhost:3000/api/user/login',
            method:'get',
            params:{
              username:this.form.username,
              password:this.form.password
            }
          }).then(function (res) {
            let user=res.data.data[0];
            if(_this.form.username==user.username&&_this.form.password==user.password){
              _this.$router.push('/sys/organ');
            }else {
              alert('用户名密码错误')
            }
          })
        }
      }

    }
</script>

<style scoped>
  hr{
    margin-bottom: 50px;
  }
#login{
  width: 400px;
  height: 430px;
  position: absolute;
  top: 20%;
  left: 35%;
  border: solid 1px;

  border-radius: 8px;
  box-shadow: 0 3px 3px rgba(0,0,0,.4);
  padding-left: 50px;
  opacity: 0.8;
  background-color:white;

}
  #innerLogin{
    margin-top: 80px;
    margin-right: 20px;
    margin-left: 20px;
    width: 300px;
  }
  #back{
    background-image: url("../assets/bac.jpg");
    background-size: 100% 100%;
    height: 780px;
    width: 100%;
    margin: 0px;

  }
  html{
    height: 100%;
  }
  #loginButton{
    width: 300px;
  }
  .loginInput{
    width: 300px;
  }
  h3{
    margin-bottom: 0px;

  }
  #msg{
    position: relative;
    font-size: 14px;
    top: 30px;
    left: 50px;
  }
  #forgetPassword{
    font-size: 14px;
    text-decoration: none;
    color: black;
    position: relative;
    left: 120px;
    top: -13px;
  }

</style>
